import { inject, observer } from 'mobx-react';
import { WeaTop, WeaLocaleProvider, WeaRightMenu } from 'ecCom';
import { toJS } from 'mobx';
import { Icon, Menu } from 'antd';

const getLabel = WeaLocaleProvider.getLabel;

@inject('addOdocRequestStore')
@observer
class AddOdocRequest extends React.Component {
  componentDidMount() {
    const { addOdocRequestStore, location } = this.props;
    addOdocRequestStore.initDatas({ needall: '1', ...location.query });
    this.scrollheigth();
    window.addEventListener('resize', addOdocRequestStore.setUpdate);
  }

  componentWillReceiveProps(nextProps) {
    const keyOld = this.props.location.key;
    const keyNew = nextProps.location.key;
    if (keyOld !== keyNew) {
      const { addOdocRequestStore } = this.props;
      addOdocRequestStore.initDatas({ needall: '1', ...nextProps.location.query });
      this.scrollheigth();
    }
    if (window.location.pathname.indexOf('/spa/workflow/index') >= 0 && document.title !== getLabel(84759, '新建流程')) {
      document.title = getLabel(84759, '新建流程');
    }
  }

  componentDidUpdate() {
    this.scrollheigth();
  }

  componentWillUnmount() {
    // 记录上次打开的模式
    const { addOdocRequestStore } = this.props;
    window.removeEventListener('resinze', addOdocRequestStore.setUpdate);
  }

  scrollheigth() {
    // let top = jQuery(".themeLayoutRoute").offset() ? (jQuery(".themeLayoutRoute").offset().top ? jQuery(".themeLayoutRoute").offset().top : 0) : 0;
    let scrollheigth = document.documentElement.clientHeight;
    const topHeight = jQuery('.detailData').offset().top;
    jQuery('.detailData').height(scrollheigth - topHeight - 20);
  }

  goABC(letter) {
    const { addOdocRequestStore } = this.props;
    addOdocRequestStore.setAbcSelected(letter);
    let topheight = jQuery(`#${letter}`).position().top;
    jQuery('.themeLayoutRoute').scrollTop(topheight);
  }

  render() {
    const { addOdocRequestStore, location } = this.props;
    // showDatas 不知道什么东西  删了要炸 没时间去找原因 --kl
    const { loading, wftypes = [], wfOperateInfo = {} } = addOdocRequestStore;
    const { curOperWfid, showBeagenters } = wfOperateInfo;
    let agentWidth = 200;
    let coms = document.getElementsByClassName('section_item')[0];
    if (!!coms && !!coms.offsetWidth) {
      agentWidth = coms.offsetWidth - 30;
    }
    let title = getLabel(509968, '发起公文');
    if (location.query.officalType) {
      if (location.query.officalType == '1') {
        title = getLabel('517281', '新建发文流程');
      }
      if (location.query.officalType == '2') {
        title = getLabel('517282', '新建收文流程');
      }
      if (location.query.officalType == '3') {
        title = getLabel('517283', '新建签报流程');
      }
    }
    return (
      <div className="odoc-create-main">
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@jvrtpd`} datas={[]}>
          <div>
            <nav className="contractCreation_div">
              <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@obdhcv`}
                loading={loading}
                icon={<i className={'icon-coms-workflow'} />}
                iconBgcolor={'#f14a2d'}
                title={title}
              />
              <nav className="contractCreation_nav">
                <div className="titleDiv">{getLabel('23775', '公文类型')}：</div>
                <ul className="titleList">
                  {wftypes.map((typeT) => {
                    const type = { ...toJS(typeT) };
                    return (<a onClick={() => this.tempScrollTo(type.id)} className={`titleA titleA${type.id}`}>
                      <li className={`titleLi titleLi${type.id}`}>{type.typeName}</li>
                    </a>);
                  })}
                </ul>
              </nav>
            </nav>
          </div>
          <div className="detailData">
            {wftypes.map((typeT) => {
              const type = { ...toJS(typeT) };
              return (
                <section id={`section${type.id}`}
                  style={{ borderLeftColor: type.color }}
                  // onMouseOver={() => {this.addTitleStyle(type.id)}}
                  // onMouseLeave={() => {this.delTitleStyle(type.id)}}
                  key={type.id}
                >
                  <h3 style={{margin: '10px 0'}} ><i className={type.img} style={{ color: type.color, fontSize: '18px', margin: '0px 10px', verticalAlign: 'middle' }} />{type.typeName}</h3>
                  <ul className="section_ul">
                    {
                      type.wfbeans && type.wfbeans.map((c) => {
                        const isagent = !!c.beagenters && c.beagenters.length > 0;
                        const isBelong = !!c.belongtoUsers && c.belongtoUsers.length > 0;
                        return (<li onMouseLeave={() => this.removeAgent(c)} >
                          <div className="section_item">
                            <div style={{ position: 'absolute', width: '15%' }}>

                              {/* 流程标题 */}
                              <div className="section_fontItem">
                                <a title={c.name == '' ? getLabel('517284', '无标题') : c.name} href={`/spa/workflow/index_form.jsp#/main/workflow/req?iscreate=1&beagenter=0&f_weaver_belongto_usertype=0&f_weaver_belongto_userid=&workflowid=${c.id}&isagent=0`} target="_blank" key={c.id}>
                                  <div className="cont">
                                    <span>	{c.name == '' ? getLabel('517284', '无标题') : c.name}</span>
                                  </div>
                                </a>
                              </div>

                              {/* 流程代理、次账号 */}
                              {(isBelong || isagent) && <div className="section_iconItem">
                                {/* <Icon title={getLabel(84522, "选择创建身份")} type="team" /> */}
                                <div className="wea-add-drop-btn">
                                  <span className="wea-add-drop-btn-area" onClick={() => this.agentCreate(c)}>
                                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@7ith1u`} title={getLabel(84522, '选择创建身份')} type="team" />
                                  </span>

                                  {showBeagenters && curOperWfid == c.id &&
                                    <div className="wea-add-drop-content" style={{ width: agentWidth }}>
                                      <div className="wea-add-drop-btn-on" onClick={() => this.agentCreate(c)}>
                                        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@gv2tps`} title={getLabel(84522, '选择创建身份')} type="team" />
                                      </div>

                                      {isBelong &&
                                        <div>
                                          <span>{getLabel(386168, '次账号')}</span>
                                          <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@33biy5`}>
                                            {c.belongtoUsers.map((b, indexid) => (
                                              <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@kid35m@${indexid}`}>
                                                <a style={{ fontWeight: '400' }} href={`/spa/workflow/index_form.jsp#/main/workflow/req?iscreate=1&beagenter=0&f_weaver_belongto_usertype=0&f_weaver_belongto_userid=${b.id}&workflowid=${c.id}&isagent=0`} target="_blank">
                                                  {b.departmentName && (b.departmentName)}
                                                  {b.jobtitlename && (`/${b.jobtitlename}`)}
                                                </a>
                                              </Menu.Item>))
                                            }
                                          </Menu>
                                        </div>
                                      }
                                      {isagent &&
                                        <div>
                                          <span>{getLabel(84523, '代理他人创建')}</span>
                                          <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@hk24ky`}>
                                            {c.beagenters.map((b, indexid) => (<Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@tcv84t@${indexid}`}>
                                              <a style={{ fontWeight: '400' }} href={`/spa/workflow/index_form.jsp#/main/workflow/req?iscreate=1&beagenter=${b.id}&f_weaver_belongto_usertype=0&f_weaver_belongto_userid=&workflowid=${c.id}&isagent=1`} target="_blank">
                                                {b.lastname}
                                                {b.departmentName && (`/${b.departmentName}`)}
                                              </a>
                                            </Menu.Item>))
                                            }
                                          </Menu>
                                        </div>
                                      }
                                    </div>
                                  }
                                </div>
                              </div>}

                              {/* 分割线 */}
                              <div className={(type.wfbeans.indexOf(c) < type.wfbeans.length - 1) ? 'div_line' : ''} />

                            </div>
                          </div>
                        </li>);
                      })}
                  </ul>
                </section>
              );
            })}
          </div>
        </WeaRightMenu>
      </div>
    );
  }

  tempScrollTo(id) {
    const { addOdocRequestStore } = this.props;
    const { wftypes = [] } = addOdocRequestStore;
    const firstId = wftypes.length > 0 ? wftypes[0].id : '';
    const topHeight = firstId ? jQuery(`#section${firstId}`).offset().top : jQuery('.detailData').offset().top;
    const sectionHeight = jQuery(`#section${id}`).offset().top;
    jQuery('.detailData').animate({ scrollTop: sectionHeight - topHeight }, 500);
    this.addTitleStyle(id);
  }
  addTitleStyle(id) {
    this.delTitleStyle();
    jQuery(`.titleLi${id}`).addClass('titleLiSelected');
  }
  delTitleStyle() {
    jQuery('.titleLi').removeClass('titleLiSelected');
  }
  // 代理创建
  agentCreate = (wf) => {
    const { addOdocRequestStore } = this.props;
    const { wfOperateInfo = {}, setShowBeagenters } = addOdocRequestStore;
    setShowBeagenters(wf.id, !wfOperateInfo.showBeagenters);
  }
  removeAgent = (wf) => {
    const { addOdocRequestStore } = this.props;
    const { setShowBeagenters } = addOdocRequestStore;
    setShowBeagenters(wf.id, false);
  }
}

export default props => <AddOdocRequest ecId={`${this && this.props && this.props.ecId || ''}_AddOdocRequest@44gzsu`} {...props} key={props.location.query.officalType || '0'} />;
